<template>
  <div class="main_container">
   <!-- 顶部卡片区域 -->
    <div class="record-cards">
      <el-card v-for="(item, index) in sortedList" :key="index" class="card-item" shadow="hover"   :style="cardQuery.type == 'list' ? { borderLeft: '5px solid' + color(item.title)} : {}">
        <div class="card-title" >{{ item.title }}  <el-icon :size="size"  :style="getBgColor(cardQuery.type , item)"><user-filled /></el-icon></div>
        <div class="card-count">{{ item.count }}</div>
        <div class="card-change">
          <span :class="item.comparisontext?.includes('增长') !== -1 ? 'text-success' : 'text-danger'">
            {{ item.comparisontext }}
          </span>
          <el-link type="primary" :underline="false" class="view-detail" @click="handleViewDetail(item)">查看详情</el-link>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ElCard, ElLink } from "element-plus";
import "element-plus/dist/index.css";
import { ref, defineProps,onMounted, watch } from "vue";
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps({
  cardList: {
    type: Array,
    default: () => []
  },
    cardQuery: {
    type: Object,
    default: () => ({})
  }
});

const getBgColor = (type,item) => {
  if(type == 'home'){
    return {'background-color': color(item.title), borderRadius: props.cardQuery.borderRadius}
  }else{
    return {'background-color': Color(item.title), borderRadius: props.cardQuery.borderRadius}
  }
}

const color = (title) => {
  switch (title) {
    case "品德发展":
      return "#e7eeff";
    case "学业发展":
      return "#ebfaf9";
    case "身心发展":
      return "#fff2e5";
    case "劳动与社会实践":
      return "#e4b4c3";
    default:
      return "#e5f7e9";
  }
}

const Color = (title) => {
  switch (title) {
    case "总记录数":
       return "#e7eeff";
    case "已审核":
        return "#ebfaf9";
    case "待审核":
        return "#fff2e5";
    case "未通过":
       return "#e4b4c3";
    default:
    return "#e5f7e9";
  }
}

// 排序后的列表
const sortedList = ref([]);

// 排序方法
const sortList = () => {
  // 创建数组副本，然后对副本进行中文排序
  sortedList.value = [...props.cardList].sort((a, b) => {
    return a.title.localeCompare(b.title, 'zh-CN');
  });
};

//查看详情
const handleViewDetail = (item) => {
  router.push({
    path: '/list',
    query: {
      title: item.title
    }
  })
};

// 在组件初始化时
onMounted(() => {
  // 如果有数据则排序，否则使用原始数据
  if (props.cardList && props.cardList.length > 0) {
    sortList();
  } else {
    sortedList.value = props.cardList;
  }
});

// 监听cardList的变化，确保数据更新时也能正确排序
watch(() => props.cardList, () => {
  if (props.cardList && props.cardList.length > 0) {
    sortList();
  } else {
    sortedList.value = props.cardList;
  }
}, { deep: true });

</script>

<style scoped lang="scss">
.main_container {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 15px;

  .record-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;

    .card-item {
      flex: 1;
      min-width: 240px;
      /* 关键：设置最小宽度，防止过度收缩 */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 10px;
      border-radius: 10px;

      ::v-deep .el-card__body {
        width: 100%;
        padding: 20px;
      }

      .card-title {
        position: relative;
        font-size: clamp(14px, 3vw, 16px);
        /* 响应式字体：最小14px，最大16px */
        margin-bottom: 15px;
        .el-icon { 
         position: absolute;
         right: 0;
         top: -10px;
         padding: 20px;
        }
      }

      .card-count {
        font-size: clamp(20px, 5vw, 28px);
        /* 关键数据字体动态调整 */
        font-weight: bold;
        margin-bottom: 15px;
      }

      .card-change {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        font-size: clamp(12px, 2.5vw, 14px);
      }
    }
  }
}

/* 平板到手机过渡区间 (768px --1148px) */
@media (max-width: 1148px) {
  .main_container {
    .record-cards {
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center; /* 居中排列，避免边缘卡片过窄 */ 
      .card-item {
        width: calc(50% - 10px);
        flex: none;
        min-width: 200px; /* 小屏幕下的最小宽度 */
         .card-title {
        font-size: clamp(14px, 3vw, 16px); /* 响应式字体：最小14px，最大16px */
        margin-bottom: 15px;
      }

      .card-count {
        font-size: clamp(20px, 5vw, 28px); /* 关键数据字体动态调整 */
        font-weight: bold;
        margin-bottom: 15px;
      }

      .card-change {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        font-size: clamp(12px, 2.5vw, 14px);
      }
      }
    }
  }
}

/* 手机屏幕 (<= 768px) */
@media (max-width: 768px) {
  .main_container {
    .record-cards {
       .card-item {
        width: 100%; /* 单列显示，确保足够宽度 */
        min-width: auto;
        .card-title {
        font-size: clamp(14px, 3vw, 16px); /* 响应式字体：最小14px，最大16px */
        margin-bottom: 15px;
      }

      .card-count {
        font-size: clamp(20px, 5vw, 28px); /* 关键数据字体动态调整 */
        font-weight: bold;
        margin-bottom: 15px;
      }

      .card-change {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        font-size: clamp(12px, 2.5vw, 14px);
      }
      }
    }
  }
}
</style>
